<template>
  <div class="feedback  common-details">
    <customDetailsTopbar title="意见反馈" />
    <div class="p-2 d-scroll bg-white">
      <van-form ref="ruleForm">
        <van-field
          v-model="msg"
          rows="10"
          autosize
          type="textarea"
          maxlength="300"
          placeholder="请输入您想反馈的意见或问题"
          show-word-limit
          :rules=" [{
            required: true,
            trigger: 'onBlur'
          }]"
        />
      </van-form>
    </div>
    <van-button type="primary" round size="small" color="#409EFF" @click="handleMsg('ruleForm')">提 交</van-button>
  </div>
</template>

<script>
import customDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
export default {
  components: {
    customDetailsTopbar
  },
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleMsg(formName) {
      this.$refs[formName].validate().then(() => {
        this.addUserComment()
      }).catch(() => {
        return false
      })
    }
    // async addUserComment() {
    //   const { status, data } = await addUserComment({ msg: this.msg })
    //   if (status === 0) {
    //     var _this = this
    //     this.$toast.success({
    //       message: data,
    //       onClose: function() {
    //         _this.msg = ''
    //         _this.$emit('update:show', false)
    //       }
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss">
.feedback {
  .van-nav-bar {
    background-color: #29d8a6;
    .van-nav-bar__title {
      font-size: 18px;
      color: #ffffff;
    }
    .van-icon {
      font-size: 22px;
      color: #ffffff;
    }
  }
  .van-cell {
      border:1px solid#e4e6ec
  }
  .van-button {
      width: 50%;
      margin: 20px auto;
      display: block;
       span {
        font-size: 16px;
      }
  }
}
</style>
